import React, { Component } from 'react'

export default class App extends Component {
  // 受控表单：表单的 value 收到了状态的控制，视图中 value 的修改又会影响到状态/数据
  // 目的：通过受控的方式收集表单的数据
  state = {
    username: '',
    content: '',
    frame: 'react',
    sex: 'man',
    // #1 定义状态,
    fruits: ['apple'],
  }
  handleInput = (e) => {
    this.setState({ username: e.target.value })
  }
  handleTextArea = (e) => {
    this.setState({ content: e.target.value })
  }
  handleSelect = (e) => {
    this.setState({ frame: e.target.value })
  }
  handleRadio = (e) => {
    this.setState({ sex: e.target.value })
  }
  handleCheckbox = (e) => {
    // #3 监听 onChange 事件，把选择的内容给 sex 状态
    // console.log(e.target.value)
    // 如果 this.state.fruits 里面有 e.target.value，再点击应该取消，应该干掉 e.target.value
    const copyFruits = [...this.state.fruits]
    if (this.state.fruits.includes(e.target.value)) {
      // 可以根据数值找索引，根据索引干掉数据
      /* const index = this.state.fruits.indexOf(e.target.value)
      // 不能这样写，这样写违背了数据的不可变性
      this.state.fruits.splice(index, 1) */
      const index = copyFruits.indexOf(e.target.value)
      copyFruits.splice(index, 1)
      this.setState({ fruits: copyFruits })
    } else {
      // 如果没有，应该把 e.target.value 加到 this.state.fruits 里面
      // this.state.fruits.push(e.target.value)
      copyFruits.push(e.target.value)
      this.setState({ fruits: copyFruits })
    }
  }
  render() {
    return (
      <ul>
        <li>
          <label htmlFor='username'>用户名：</label>
          <input
            id='username'
            type='text'
            value={this.state.username}
            onChange={this.handleInput}
          />
        </li>
        <li>
          <label htmlFor='content'>其他信息：</label>
          <textarea
            id='content'
            value={this.state.content}
            onChange={this.handleTextArea}
          ></textarea>
        </li>
        <li>
          <label htmlFor='frame'>框架：</label>
          <select
            id='frame'
            value={this.state.frame}
            onChange={this.handleSelect}
          >
            <option value='vue'>Vue</option>
            <option value='react'>React</option>
            <option value='angular'>Angular</option>
          </select>
        </li>
        <li>
          {/* #2 把状态和 input 的 checked 属性进行绑定 */}
          <input
            type='radio'
            id='man'
            value='man'
            checked={this.state.sex === 'man'}
            onChange={this.handleRadio}
          />
          <label htmlFor='man'>男</label>
          <input
            type='radio'
            id='woman'
            value='woman'
            checked={this.state.sex === 'woman'}
            onChange={this.handleRadio}
          />
          <label htmlFor='woman'>女</label>
          <input
            type='radio'
            id='unknown'
            value='unknown'
            checked={this.state.sex === 'unknown'}
            onChange={this.handleRadio}
          />
          <label htmlFor='unknown'>未知</label>
        </li>
        <li>
          <input
            type='checkbox'
            id='apple'
            value='apple'
            checked={this.state.fruits.includes('apple')}
            onChange={this.handleCheckbox}
          />
          <label htmlFor='apple'>Apple</label>
          <input
            type='checkbox'
            id='orange'
            value='orange'
            checked={this.state.fruits.includes('orange')}
            onChange={this.handleCheckbox}
          />
          <label htmlFor='orange'>Orange</label>
        </li>
      </ul>
    )
  }
}
